<!--  -->
<template>
  <div class= 'home-wrap'>
    <div class="search-bar">
      <van-search v-model="value" @click-input="$router.push('/search')"
      shape="round" background="#1abc9c"
      placeholder="请输入搜索关键词">
      <template #left>
        <img class="img" src="@/assets/icon.png" alt="不见了" style="width:0.8rem"/>
      </template>
      </van-search>
    </div>
      <van-tabs class="tab-wrap" v-model:active="active" swipeable animated sticky
      title-active-color='#333333' title-inactive-color='#777777'
      >
        <van-tab :title="item.name" v-for="(item,index) in channelList" :key="index">
          <article-list :channels='channelList[active]'></article-list>
        </van-tab>
        <template #nav-right >
          <div class="empty"></div>
          <div class="gengduo-btn" @click="isChannelEditShow = true">
            <i class="iconfont icon-gengduo"></i>
          </div>
        </template>
      </van-tabs>
      <!-- 频道编辑弹出层 -->
      <van-popup
        v-model:show="isChannelEditShow"
        closeable close-icon-position='top-left'
        position="bottom"
        :style="{ height: '100%' }"
        @close='isEdit=false'
      >
      <channel-edit :channels='channelList' :active='active' :isEdit='isEdit'
      @update-active='onUpdateActive'
      @update-myChannels='onUpdateMyChannels'
      @delete-myChannels='onDeleteMyChannels'
      @updata-edit='onUpdataEdit'
      ></channel-edit>
      </van-popup>
      <!-- 频道编辑弹出层 -->
  </div>
</template>

<script>
import { getChannelList } from '@/api/user.js'
import articleList from './components/articleLst.vue'
import ChannelEdit from './components/channelEdit.vue'
export default {
  components: { articleList, ChannelEdit },
  data () {
    return {
      value: '',
      active: 0,
      channelList: [], // 首页频道列表
      isChannelEditShow: false, // 控制弹出层是否出现
      isEdit: false // 控制编辑界面按钮的状态,因为关闭弹出层要初始化isEdit,所以放在父组件上了
    }
  },
  methods: {
    async localChannel () {
      try {
        const res = await getChannelList()
        this.channelList = res.data.data.channels
      } catch (error) {
        this.$toast('获取首页频道列表失败')
      }
    },
    // 更新active
    onUpdateActive (index) {
      this.active = index
      this.isChannelEditShow = false
      this.isEdit = false
    },
    onUpdateMyChannels (channel) {
      this.channelList.push(channel)
    },
    // 编辑状态删除指定用户关注频道
    onDeleteMyChannels (index) {
      // 删除active之后的没有问题，删除active之前的相当于后面的前移了从而导致active所指的不一致
      if (index >= this.active) {
        this.channelList.splice(index, 1)
      } else {
        this.channelList.splice(index, 1)
        this.active -= 1
      }
    },
    // 子组件点击编辑按钮触发此事件，改变isEdit从而控制子组件
    onUpdataEdit () {
      this.isEdit = !this.isEdit
      console.log(111)
    }
  },
  created () {
    this.localChannel()
  }
}
</script>

<style  scoped lang='less'>
.home-wrap {
  padding-bottom: 100px;
}
/deep/ .tab-wrap {
  .van-tabs__wrap {
    height: 82px;
  }
  .van-tab {
    min-width: 200px;
    font-size: 30px;
  }
  .van-tab+.van-tab {
    border-left: 1px solid #edeff3;
  }
  .van-tabs__nav {
    padding-bottom: 0;
  }
  .van-tabs__line {
    bottom: 8px;
    width: 60px;
    height: 6px;
    background-color: rgb(18, 209, 81);
  }
  .empty {
    width: 66px;
    height: 82px;
    flex-shrink: 0;
  }
  .gengduo-btn {
    position: fixed;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 66px;
    height: 82px;
    background-color: rgba(#fff,1);
    opacity: 0.888;
    box-shadow:-1px 0 1px 0px #f3eded;
    i.iconfont {
      font-size: 33px;
    }
  }
}
</style>
